<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Functional</title>
</head>

<body>
  <script src="../../node_modules/vue/dist/vue.js"></script>
  <div id="app">
  </div>
  <script>
    // transform Vue into a this-less functional API with 12 lines of code.
    function app({ el, model, view, actions }) {
      Object.keys(actions).forEach(key => {
        const rawAction = actions[key]
        // 将action替换成一个新的函数
        actions[key] = (...payload) => {
          Object.assign(model, rawAction(model, actions, ...payload))
        }
      })
      new Vue({
        data: model,
        render: h => view(h, model, actions)
      }).$mount(el)
    }

    // voila
    app({
      el: '#app',
      model: {
        count: 0
      },
      actions: {
        inc: ({ count }) => ({ count: count + 1 }),
        dec: ({ count }) => ({ count: count - 1 })
      },
      view: (h, model, actions) => h('div', [
        model.count, ' ',
        h('button', { on: { click: actions.inc } }, '+'),
        h('button', { on: { click: actions.dec } }, '-')
      ])
    })
  </script>
</body>

</html>